<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>My Resume a Personal Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<!--mobile apps-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="My Resume Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript">addEventListener("load", function() {
	setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
	window.scrollTo(0, 1);
}</script>
<!--mobile apps-->
<!--Custom Theme files-->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/swipebox.css">
<!--//Custom Theme files-->
<!--js-->
<script src="js/jquery-1.11.1.min.js"></script> 
<!-- //js -->
<!--web-fonts-->
<link href='//fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<!--start-smooth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>	
<script type="text/javascript">jQuery(document).ready(function($) {
	$(".scroll").click(function(event) {
		event.preventDefault();
		$('html,body').animate({
			scrollTop: $(this.hash).offset().top
		}, 1000);
	});
});</script>
<!--//end-smooth-scrolling-->
</head>
<body>
	<!--banner-->
	<div id="home" class="banner">
		<div class="banner-info">
			<div class="container">
				<div class="col-md-4 header-left">
					<img src="images/img1.jpg" alt=""/>
				</div>
				<div class="col-md-8 header-right">
					<h2>Hello</h2>
					<h1>I'm 张睿浩</h1>
					<h6>Java Development Engineer</h6>
					<ul class="address">
						<li>
							<ul class="address-text">
								<li><b>D.O.B</b></li>
								<li>1993-03-22</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>PHONE </b></li>
								<li>17090077783</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>ADDRESS </b></li>
								<li>广东省广州市花都区新华街学府路 1 号</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>E-MAIL </b></li>
								<li><a href="mailto:ruihaol@126.com"> ruihaol@126.com</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>WEBSITE </b></li>
								<li><a href="http://www.haol.site">www.haol.site</a></li>
							</ul>
						</li>
<li>
							<ul class="address-text">
								<li><b>Rescume </b></li>
								<li><a href="ftp://hao:is@haol.site/RuiHaoZhang-Resume.zip">PDF Version 下载</a></li>
							</ul>
						</li>

					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//banner-->
	<!--top-nav-->
	<div class="top-nav wow">
		<div class="container">
			<div class="navbar-header logo">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					Menu
				</button>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<div class="menu">
					<ul class="nav navbar">
						<li><a href="#about" class="scroll">About</a></li>
						<li><a href="#work" class="scroll">Experience</a></li>
						<li><a href="#education" class="scroll">Education</a></li>
						<li><a href="#skills" class="scroll">Skills</a></li>
						<li><a href="#projects" class="scroll">My Projects</a></li>
						<li><a href="#contact" class="scroll">Contact</a></li>
					</ul>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>	
	<!--//top-nav-->
	<!--about-->
	<div id="about" class="about">
		<div class="container">
			<h3 class="title"> About Me</h3>
			<div class="col-md-8 about-left">
				<p><b>【个人介绍 】</b>2014年9月到2018年7月就读于华南理工大学广州学院软件工程专业，本科学历。期间主要课程有：设计模式的艺术、Java EE 框架开发、
					数据库原理、算法设计、计算机网络、IT 项目管理、软件工程、操作系统等。在校期间，热衷于志愿活动，积极参加学校组织的志愿活动。
				在校期间积极参与教学活动，参加过数个校、省级大赛，比如蓝桥杯、中星杯网络攻防大赛、程序设计天梯赛等，获得大量荣誉和称号。</p>
				<p><b>【专业技能】</b>开发语言：掌握 JAVA 语言，对设计模式略有研究，熟悉 JAVA 几大流行框架的使用，
							比如：hibernate、mybits、spring、spring MVC、spring boot，struts2
							了解数据库的基本使用，软件测试基本知识。</p>
				<p><b>【其他技能】</b>熟练使用分布式的版本控制系统 Git、SVN；考取C1驾驶证</p>
			</div>
			<div class="col-md-4 about-right">
				<ul>
					<h5>技能荣誉</h5>
					<li><span class="glyphicon glyphicon-menu-right"></span>2014年获得全国计算机等级(二级C)证书</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>2016年获得中星杯网络攻防大赛校内三等奖</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>2017年获得计算机程序设计大赛天梯赛华南赛区三等奖</li>
					<li><span class="glyphicon glyphicon-menu-right"></span>2017年获得蓝桥杯广东赛区二等奖</li>
				</ul>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//about-->
	<!--work-experience-->
	<div id="work" class="work">
		<div class="container">
			<h3 class="title">Work Experience</h3>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2014.7 - 2018.7 </h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-briefcase"></span> <a href="www.gcu.edu.cn"></a>华南理工大学广州学院 </h5>
					<p><center><b>独立开发基于 Java EE 的网页应用</b></center></p>
					<p><b><a href="www.haol.site/bbs"></a>简易的论坛系统</b>（本论坛采用Struts2、Hibernate、Spring三个框架的整合技术实现对通用论坛的设计和实现，实现的功能包括，注册、登录、发帖、对板块的增删改查、对留言的增删改查、对个人权限的设置、个人信息的增删改查） </p>
						<p><b><a href="www.haol.site/bbs"></a>宿舍管理系统和<a href="www.haol.site/hostel"></a>小区管理系统</b>（这两个管理系统后端采用Spring、Spring Mvc、Mybatis、Maven管理，前端部分采用backbone.js和其他插件）。 </p>
						<p><b><a href="www.haol.site/bbs"></a>Haoso图片</b>（页面模仿百度图片）。 </p>
				</div>
				<div class="clearfix"> </div>
			</div>
								</div>
	</div>
	<!--//work-experience-->
	<!--education-->
	<div id="education" class="education">
		<div class="container">
			<h3 class="title">Education Experience</h3>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2014年9月2018年7月</h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-education"> </span>个人荣誉</h5>
					<p>荣获2015-2016年度校三好学生荣誉称号 </p>
					<p>荣获2016年华南理工大学广州学院暑期“三下乡”社会活动积极分子称号</p>
					<p>荣获2015-2016年度华南理工大学广州学院优秀共青团员荣誉称号</p>
					<p>荣获2015-2016年度机械工程学院第六届田径运动会优秀裁判员荣誉称号</p>
					<p>荣获2015-2016年度校学生志愿者服务中心优秀队员荣誉称号</p>
					<p>荣获2015-2016年度华南理工大学广州学院优秀共青团员荣誉称号</p>
					<p>荣获2014-2015年度校学生志愿者服务中心优秀干事荣誉称号</p>
					<p>荣获2014-2015年度校三好学生荣誉称号</p>
				
				</div>
				<div class="clearfix"> </div>
			</div>
						<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2016学年到2017学年</h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-education"> </span> 班级工作</h5>
					<p><b>职位：班长 </b></p>
					<p>工作：负责班级的主要事务，负责和辅导员和班主任的联系，传达和布置辅导员安排的任务。负责班级主要事件的组织和安排协调，比如组织班级第一次班游，参与人数达80%</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="work-info"> 
				<div class="col-md-6 work-left"> 
					<h4>2015学年-2016学年</h4>
				</div>
				<div class="col-md-6 work-right"> 
					<h5><span class="glyphicon glyphicon-education"> </span> 班级工作</h5>
					<p><b>职位：体育委员</b> </p>
					<p>工作：负责班级体育工作的正常进行。比如组织班级参加院运会；组织班级参加学院班级篮球赛</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//education-->
	<!--skills-->
	<div id="skills" class="skills">
		<div class="container">
			<h3 class="title">Skills</h3>
			<div class="skills-info">
				<div class="col-md-6 bar-grids">
					<h6>JAVA WEB DESIGN  <span> 69% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 69%">
						</div>
					</div>
					<h6>UI DESIGN & DEVELOPER <span> 39% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 39%">
						</div>
					</div>
					
				</div>
				<div class="col-md-6 bar-grids">
					<h6>HTML/CSS<span>49% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 49%">
						</div>
					</div>
					<h6>PHOTOSHOP <span> 49% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 49%">
						</div>
					</div>
					
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//education-->
	<!--portfolio-->
	<div id="projects" class="portfolio">
		<div class="container">
			<h3 class="title wow zoomInLeft animated" data-wow-delay=".5s">My Projects</h3>
			<div class="sap_tabs">			
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list wow fadeInUp animated" data-wow-delay=".7s">
						<li class="resp-tab-item"><span>Java Project</span></li>
						<li class="resp-tab-item"><span>Html Project</span></li>
						<li class="resp-tab-item"><span>Life Photo</span></li>
					</ul>	
					<div class="clearfix"> </div>	
					<div class="resp-tabs-container">
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
							
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g5.jpg" class="swipebox" >
											<img src="images/g5.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>简易论坛<span> 系统</span></h3>
												<p>基于Java EE 课程成果展示，以论坛为主题</p>
												<p>使用：mysql、hibernate、spring、struts2</p>
												<p><a href="/index/link.html?soft=bbs&from=recume">查看项目请点击</a></p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g6.jpg" class="swipebox" >
											<img src="images/g6.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>小区管理<span> 系统</span></h3>
												<p>基于Java EE 课程成果展示，以小区物业管理为主题</p>
												<p>使用：mysql、mybatis、spring、springMvc，shiro</p>
												<!--<p>前端使用：backbone.js、bootstarp、jquery validate</p>-->
												<p><a href="/index/link.html?soft=village&from=recume">查看项目请点击</a></p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g7.jpg" class="swipebox" >
											<img src="images/g7.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>宿舍管理<span> 系统</span></h3>
												<p>基于暑期实习的成果展示，以宿舍管理为主题</p>
												<p>使用：mysql、mybatis、spring、springMvc</p>
												<!--<p>前端使用：backbone.js、bootstarp、jquery validate</p>-->
												<p><a href="/index/link.html?soft=hostel&from=recume">查看项目请点击</a></p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g13.jpg" class="swipebox" >
											<img src="images/g13.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>HaoSo图片<span> 系统</span></h3>
												<p>对百度图片的页面模仿，及上传图片及搜索</p>
												<p>使用：mysql、mybatis、spring、springMvc</p>
												<!--<p>前端使用：bootstarp</p>-->
												<p><a href="/index/link.html?soft=haoso&from=recume">查看项目请点击</a></p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g12.jpg" class="swipebox" >
											<img src="images/g12.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>权限管理片<span> 系统</span></h3>
												<p>基于Apache的shiro框架设计的权限管理系统</p>
												<p>使用：mysql、mybatis、spring、springMvc</p>
												<p><a href="/index/link.html?soft=shiro&from=recume">查看项目请点击</a></p>
											</div>
										</a>	
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g1.jpg" class="swipebox" >
											<img src="images/g1.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Project</span></h3>
												<p>基于网页设计课程的成果展示，以个人为主题。</p>
												<p><a href="/index/link.html?soft=introduce/html/home.html&from=recume">查看项目请点击</a></p>

											</div>
										</a>	
									</div>
								</div>
								
								<div class="clearfix"> </div>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="tab_img">
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g2.jpg" class="swipebox" >
											<img src="images/g2.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Life</span></h3>
												<p>拍摄于中国澳门大三巴牌坊</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g4.jpg" class="swipebox" >
											<img src="images/g4.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Life</span></h3>
												<p>拍摄于广东广州天河智慧创业园</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g8.jpg" class="swipebox" >
											<img src="images/g8.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Life</span></h3>
												<p>拍摄于广东广州花都花都湖</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g9.jpg" class="swipebox" >
											<img src="images/g9.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Life</span></h3>
												<p>拍摄于中国澳门渔人码头</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g10.jpg" class="swipebox" >
											<img src="images/g10.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Life</span></h3>
												<p>拍摄于广东深圳大梅沙</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="col-md-4 portfolio-grids">
									<div class="grid">
										<a href="images/g11.jpg" class="swipebox" >
											<img src="images/g11.jpg" alt="" class="img-responsive" />
											<div class="figcaption">
												<h3>My<span> Life</span></h3>
												<p>拍摄于广东清远黄腾峡</p>
											</div>
										</a>	
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--ResponsiveTabs-->
			<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
			<script type="text/javascript">$(document).ready(function() {
	$('#horizontalTab').easyResponsiveTabs({
		type: 'default', //Types: default, vertical, accordion           
		width: 'auto', //auto or any width like 600px
		fit: true // 100% fit in a container
	});
});</script>
			<!--//ResponsiveTabs-->
			<!-- swipe box js -->
			<script src="js/jquery.swipebox.min.js"></script> 
				<script type="text/javascript">jQuery(function($) {
	$(".swipebox").swipebox();
});</script>
			<!-- //swipe box js -->
		</div>
	</div>
	<!--//portfolio-->
	<!--contact -->
	<div class="welcome contact" id="contact">
		<div class="container">
			<h3 class="title">Contact Us</h3>
			<div class="contact-row">
				<div class="col-md-6 contact-left">
					<img src="images/g3.jpg" />
				</div>
				<div class="col-md-6 contact-right">
					<div class="address-left">
						<p>ZHONGGUO GUANGZHOU<br> 2017,China </p>
					</div>
					<div class="address-right">
						<p>Call us :  17090077783</p>
						<p>E-mail : <a href="mailto:ruihaol@126.com">ruihaol@126.com</a></p>
					</div>
					<div class="clearfix"></div>
					<div class="contact-form">
						<form method="post">
							<input type="text" name="Name" placeholder="Name" required="">
							<input class="email" name="Email" type="text" placeholder="Email" required="">
							<input class="phone" name="Phone" type="text" placeholder="Phone" required="">
							<textarea name="Message" placeholder="Message" required=""></textarea>
							<div class="row" style="text-align: center">
        							<button type="button" class="btn btn-s-md pull-center" id="submitBtn">SUBMIT</button>
        					</div>
							
						</form>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//contact -->
	<!--footer-->
	<div class="footer">
		<div class="container">
			<p>©粤ICP备17014896号 版权所有| Design by <a >@好好的浩浩</a></p>
		</div>
	</div>
	<!--//footer-->
	<!--smooth-scrolling-of-move-up-->
		<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	var defaults = {
		containerID: 'toTop', // fading element id
		containerHoverID: 'toTopHover', // fading element hover id
		scrollSpeed: 1200,
		easingType: 'linear'
	};

	$().UItoTop({
		easingType: 'easeOutQuart'
	});

});
$("#submitBtn").click(function () {   
$.ajax({
		type:"POST",
		url:"http://www.haol.site/link/msg/add/rescume",
		dataType: "json",
		data: {
                name: function () {
                    return $("[name=Name]").val();
                 },
                email: function () {
                    return $("[name=Email]").val();
                 },
                 phone:function(){
                    return $("[name=Phone]").val();
                },
                 message:function(){
                    return $("[name=Message]").val();
                },
       },
		success: function (reply) {
			layer.msg('增加成功', {icon:1});
		
			setTimeout("window.location.reload();",2000)
			
			}
	})


});

</script>
    <script src="js/bootstrap.js"></script>
</body>
</html>